<template>
  <view class="searchHistory">
    <view class="top">
      <text>搜索历史</text>
      <u-icon name="trash" color="#999999" size="22" @click="clear"></u-icon>
    </view>
    <view class="content footer-nav" ref="contentRef" v-if="searchList && searchList.length > 0">
      <text v-for="(item, index) in searchList" :key="index" @click="commitKeyword(index,item)" class="tt" ref="textTT">{{ item
      }}</text>
      <text class="more"  :class="{diplayShow : !moreShow , diplayNone : moreShow}" @click="getMoreList">
        <u-icon name="arrow-up" color="#999999" size="12" class="moreIcon"></u-icon>
      </text>
    </view>
  </view>
</template>

<script>
import pageMixin from '@/mixins/pageMixin';

export default {
  mixins: [pageMixin],
  props: {
    typeSty: {
      type: String,
      default: ''
    }
  },
  components: {},
  data () {
    return {
      height: 0, //控制搜索内容的高度
      moreShow: true,
      moreHeight: null,
      searchList: uni.getStorageSync('searchListAll') ? uni.getStorageSync('searchListAll') : [], //走接口得到的搜索历史数据
      searchListAll: uni.getStorageSync('searchListAll') ? uni.getStorageSync('searchListAll') : [] //走接口得到的搜索历史数据
    };
  },
  mounted () {
    this.panDuan();
  },
  computed: {},
  watch () { },
  methods: {
    clear () {
      this.searchList = [];
      this.searchListAll = [];
      uni.setStorageSync('searchListAll', this.searchListAll);
      console.log(uni.getStorageSync('searchListAll'));
    },
    unshiftListt (keyword) {
      let isRepetition = false;
      this.searchListAll.forEach((item, index) => {
        if (item == keyword) {
          console.log(40, index);
          this.commitKeyword(index);
          isRepetition = true;
        }
      });
      if (!isRepetition) {
        //没有重读
        this.searchListAll.unshift(keyword); //
        uni.setStorageSync('searchListAll', this.searchListAll);
      }
      this.panDuan();
    },
    getMoreList () {
      this.searchList = uni.getStorageSync('searchListAll') ? uni.getStorageSync('searchListAll') : [];
      this.moreShow = false;
      this.height = '100Vh';
    },
    commitKeyword (index,item) {
      let text = this.searchList[index];
      if (index != 0) {
        this.searchListAll.unshift(this.searchListAll.splice(index, 1)[0]);
      }

      uni.setStorageSync('searchListAll', this.searchListAll);
      this.panDuan();
      this.$emit('changeSearchList', item ? item : index);
	  
      if (this.typeSty == 'drug') {
        this.toPage(`public/search?keyword=${item ? item : index}`)
      } else this.toPage(`circle/circleSearch?keyword=${item ? item : index}`)
      
    },
    panDuan () {
      this.searchList = uni.getStorageSync('searchListAll') ? uni.getStorageSync('searchListAll') : [];
      this.searchListAll = uni.getStorageSync('searchListAll') ? uni.getStorageSync('searchListAll') : [];
      if (this.searchListAll.length > 1) {
        let _this = this;
        let moreW = 0; //更多按钮的宽度
        let more = uni
          .createSelectorQuery()
          .in(this)
          .select('.more');
        more.boundingClientRect(function (data) {
          moreW = data.width;
          console.log(data);
          console.log(11111111111111111111, _this.height);
        }).exec(function (res) {
          // 注意：exec方法必须执行，即便什么也不做，否则不会获取到任何数据
        });
        let footerW = 0; //外层盒子的宽度
        let info = uni
          .createSelectorQuery()
          .in(this)
          .select('.footer-nav');
        info.boundingClientRect(function (data) {
          footerW = data.width;
        }).exec(function (res) {
          // 注意：exec方法必须执行，即便什么也不做，否则不会获取到任何数据
        });

        this.$nextTick(function () {
          let ttW = 0; //内容的宽度
          let infott = uni
            .createSelectorQuery()
            .in(this)
            .selectAll('.tt');
          infott
            .boundingClientRect(function (data) {
              _this.moreShow = false;
              for (let i = 0; i < data.length; i++) {
                ttW = ttW + data[i].width;
                console.log('_this.searchList', _this.searchList);
                if (ttW + moreW + 40 > footerW * 1.8) {
                  _this.searchList = _this.searchList.slice(0, i); //获得两行以内的数据
                  _this.moreShow = true;
                  console.log('_this.searchList', _this.searchList);
                  break;
                }
              }
            })
            .exec(function (res) {
              // 注意：exec方法必须执行，即便什么也不做，否则不会获取到任何数据
            });
        });
      } else {
        this.moreShow = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.searchHistory {
  width: 100%;
  margin-top: 16rpx;
  padding: 0 32rpx;
  margin-bottom: 32rpx;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    text {
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1a1a1a;
    }
  }

  .content {
    width: 100%;
    display: inline-block;
    padding: 0;
    margin-top: 12rpx;

    text {
      background: #f5f5f5;
      border-radius: 8rpx;
      display: inline-block;
      line-height: 56rpx;
      height: 56rpx;
      text-align: center;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      padding: 0 24rpx;
      margin: 20rpx 20rpx 0 0;
      margin-top: -10rpx;
      margin-top: 10rpx;
    }

    .more {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      vertical-align: bottom;
      position: relative;
	  display: none;

      .moreIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}

.diplayShow{
	display: inline-block;
	background-color: transparent !important;
}
.diplayNone{
	display: none;
}
</style>
